<%@ Page Language="C#" MasterPageFile="doc.master" Title="2 Site" %>

<%@ Register TagPrefix="mod" TagName="inline" Src="/Mod/Mod_Inline.ascx" %>
<%@ Register TagPrefix="mod" TagName="image" Src="/Mod/Mod_Image.ascx" %>

<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="head">
</asp:Content>

<asp:Content ID="Content1" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">

    <h1>Homepage = Website</h1>
    <p>
        Web-Technologien sind parallel verlaufende Konzepte, die einander ergänzen.
        Oft gibt es für eine bestimmte Fragestellung mehrere ähnliche Ansätze. 
        In ExpressionWeb sind daher alle diese alternativen Möglichkeiten gleichzeitig enthalten 
        und man kann je nach Kenntnisstand die eine oder andere Möglichkeit wählen.
    </p>

    <p>Der Schwerpunkt der Anwendung von Expression Web liegt am Design und nicht auf der Programmierung.</p>
    <p>Der heutige Workshop soll zeigen, wie man rasch zu einem tollen Ergebnis kommt und wie man dieses Ergebnis am Webserver speichert.</p>
    <p>Blendet man alle Symbolleisten ein, erhält man folgendes Bild:</p>
    <mod:image ID="Img1" runat="server"
        Image="clip_image002.jpg"
        PathToImage="/documents/images/"
        UseLightBox="1"></mod:image>
    <p>Ganz ohne die Symbolleisten kommt man nicht aus. Beispielsweise kann man in der Bildsymbolleiste eine automatische Miniaturansicht generieren lassen, was über die Menüs allein nicht möglich ist.</p>
    <p>
        Was ist eine „Homepage“?
        Eine Homepage ist ein Orchester von Dateien und Ordnern, eventuell auch server- oder clientseitigen Interpretern, Compilern und Datenbanken, die gemeinsam das herstellen, was der Benutzer im Browser sieht. Expression Web nennt diese Homepages „Sites“. Es sind einfache Ordner im Dateisystem, deren Symbol ein Ordner mit einer kleinen Weltkugel ist, damit man sieht, dass das eine Website ist.
    </p>
    <p>Eine einzelne Seite kann auch schon eine Homepage sein, wenn sie nur Text enthält. Eine solche Datei läuft unter allen Bedingungen; sowohl am Desktop (mit oder ohne Internet-Verbindung) als auch auf einem Server. Eine Einzelseite hat die Endung .htm oder .html.</p>
    <p>Wenn diese Seite auch Bilder enthält, benötigt sie weitere Dateien, die aber nicht unbedingt am eigenen Rechner sein müssen, sondern sich auch irgendwo im Internet befinden können. Wenn diese Bilder allerdings aus dem Internet kommen, benötigt man zum Testen immer auch eine Internet-Verbindung.</p>
    <p>Alle Dateitypen, die eine serverseitige Unterstützung brauchen, erfordern auch immer einen Server, um dargestellt werden zu können. Das sind: .ascx, .aspx, .php, .master. Daher hat Expression Web auch einen Webserver eingebaut. Öffnet man eine beliebige Datei und klickt man auf Datei -> Browservorschau -> z.B. Chrome, sieht man in der Adresszeile zum Beispiel : http://localhost:4072/default.htm. Das bedeutet, dass ein mit Expression Web mitgelieferter Webserver die Verarbeitung der Datei übernommen hat.</p>
    <p>Dynamische Webvorlagen .dwt können nur mit Expression Web bearbeitet werden und müssen nicht auf den Server geladen werden.</p>

    <h2>Konzepte von Expression Web</h2>

    <h3>Wie kann man rasch eine tolle Homepage erstellen?</h3>
    <p>Richtige Antwort: man macht sie nicht selbst – speziell die Navigation und die Gestaltung – und verwendet eine fertige – oder eine vorgefertigte Seite.</p>
    <p>Expression Web bietet uns mehrere Alternativen an, eine Website zu erstellen:</p>
    <ul>
        <li>Handarbeit</li>
        <li>Vorlagen (Templates)</li>
        <li>Webpakete</li>
        <li>WebSite Import</li>
        <li>Master Pages</li>
    </ul>

    <h4>Handarbeit</h4>
    <p>
        <code>Site->Neue Site->Allgemein->Leere Website</code>
    </p>
    <p>
        Hier muss man alles selbst machen. 
        Nur für Hartgesottene. 
        Daher gleich einmal einige Details zu einer neuen, leeren Seite.
    </p>
    <p>
        Eine neue leere Website erhält bei ExpressionWeb den fortlaufenden Namen <code>MeineWebsite1</code>
        und enthält (fast) nichts. 
        Wenn man die versteckten Dateien ausgeblendet hat, 
        dann sieht man tatsächlich keine Dateien. 
        Es sind aber drei unsichtbare Objekte 
        (zwei Ordner <code>_vti_cnf</code> und <code>_vti_pvt</code>
        und die Datei <code>desktop.ini</code>) in einer leeren Website enthalten.
    </p>
    <p>
        Die Ordner enthalten Informationen, die Expression Web benötigt, 
        um die Webseite zu verwalten und sind auch in Dreamweaver und Share Point bekannt.
    </p>
    <p>
        In <code>_vti_cnf</code> ist für jede Datei des Ordners eine gleichnamige Datei angelegt, 
        die aber nicht das Format der Original-Datei hat sondern nur Meta-Informationen enthält.
    </p>
    <p>Die Datei <code>desktop.ini</code> enthält folgende Information</p>
    <pre>
        [.ShellClassInfo]
        IconFile=_vti_pvt/fpdbw.ico
        IconIndex=0
        ConfirmFileOp=0
        InfoTip=Stores your local web site
    </pre>
    <p>InfoTip erscheint beim Überfahren des Ordners mit der Maus und IconFile ist das Ordner-Symbol.</p>
    <p>Man sollte diese Dateien und Ordner nicht löschen.</p>
    <p>Löscht man sie dennoch, dann werden Sie im Zuge von Bearbeitungsvorgängen in Expression Web wieder angelegt.</p>
    <p>
        Überhaupt sollte man sich folgende Arbeitsweise zurechtlegen: 
        in den Webordnern sollte man Dateien nur durch Ziehen in Expression Web hineinkopieren 
        und auch nur in ExpressionWeb löschen. 
        Damit kann ExpressionWeb seine interne Organisation immer aktuell halten.
    </p>
    <p>
        Sollte es dennoch einmal passieren, dass etwas durcheinandergerät, 
        empfiehlt es sich folgendes Kommando anzuwenden: 
        <code>Extras -> Links neu berechnen</code>. 
        Damit wird auch das Dateienverzeichnis in ExpressionWeb mit dem Verzeichnis auf der Festplatte synchronisiert.
    </p>

    <h4>Vorlagen (Templates)</h4>
    <p>
        Vorlagen sind in Ordnern mit der Endung <code>.tem</code> gespeichert in 
        <code>c:\programme\Microsoft Expression\WEBS</code> gespeichert.
    </p>
    <p>
        Ihre Entwicklung ist nicht schwierig, wird aber händisch 
        und ohne Unterstützung durch Expression Web durchgeführt. 
        Man beschränkt sich daher meist auf die Benutzung der bestehenden Vorlagen.
    </p>
    <p>Man legt ein neues Web so an:</p>
    <p><code>Site->Neue Site->Vorlagen</code></p>
    <p>
        Wählt man eine Vorlage, werden alle Dateien im Ordner <code>.tem</code> in das eigene Web übernommen, 
        wobei auch Ordner angelegt werden können, entsprechend den Angaben in der <code>.inf</code>-Datei.
    </p>
    <p>
        Das Angenehme an den Vorlagen ist, dass es ein Vorschaubild gibt 
        und man daher nicht so lange braucht, um eine geeignete Version auszuwählen.
    </p>
    <p>
        Die kopierte Vorlage, meist geht es um die Texte, 
        kann man in der Datei <code>.dwt</code> an die eigenen Bedürfnisse anpassen.
    </p>
    <p>Es gibt 6 vordefinierte Vorlagen für eine Website für Kleinbetriebe, 6 Vorlagen für Organisationswebs und 7 Vorlagen für eine persönliche Website. Weitere Templates können dort hineinkopiert werden.</p>
    <p>Der Aufbau ist jeweils derselbe aber das Aussehen verändert sich. Folgende Templates sind vordefiniert:</p>
    <h5>Persönliche Website</h5>
    <ul>
        <li>Privat</li>
        <li>Über mich</li>
        <li>Lebenslauf</li>
        <li>Fotosammlung</li>
        <li>Hyperlinks</li>
        <li>Kontakt</li>
    </ul>
    <h5>Organisation</h5>
    <ul>
        <li>Privat</li>
        <li>Über</li>
        <li>Nachrichten</li>
        <li>Kalender</li>
        <li>Fotosammlung</li>
        <li>Hyperlinks</li>
        <li>FAQ</li>
        <li>Kontakt</li>
    </ul>
    <h5>Kleinunternehmen</h5>
    <ul>
        <li>Privat</li>
        <li>Über</li>
        <li>Nachrichten</li>
        <li>Produkte</li>
        <li>Dienste</li>
        <li>Kalender</li>
        <li>Kontakt</li>
        <li>Mitarbeiter</li>
        <li>Beschäftigung</li>
        <li>FAQ</li>
        <li>Fotosammlung</li>
        <li>Presse</li>
        <li>Sitemap</li>
    </ul>
    <p>Man kann auch von diversen Webquellen weitere Templates downloaden und diese .tem-Folder in den Ordner WEBS von ExpressionWeb kopieren.</p>
    <p>Auf dieser Website wurde mehr als 80 Templates in Webpakete kovertiert. Diese sind im Menüpunkt "Webs-Pakete" downloadbar.</p>

    <h2>Webpakete</h2>
    <p>
        Webpakete sind den Templates sehr ähnlich. 
        Man importiert sie aber in eine Site und kann dieses Format (mit Änderungen) wieder exportieren und anderswo weiter verwenden.
    </p>
    <p>Außerdem kann man in eine Website mehrere Webpakete einfügen, was mit Vorlagen nicht möglich ist.</p>
    <p>
        Ein Webpaket ist eine Kopie eines fertigen Webs in einer Datei mit der Endung <code>.fwp</code>, 
        wobei meist die personalisierten Texte durch Blindtext ersetzt werden. 
        Man kann fertige Webpakete importieren und eigene Webs als Webpaket exportieren.
    </p>
    <p>
        Man kann auch sagen, dass ein Webpaket eine Website in einer einzelnen Datei darstellt. 
        Man könnte auch einfach ein ZIP-Archiv des Webs erstellen und in eine anderes hineinkopieren.
        Das hat aber den Nachteil, dass die verborgenen Organisationsdateien nicht aktualisiert werden.
        Außerdem kann bei einem Webpaket auch eine Beschreibung, der Autor und die Firma angegeben.
    </p>
    <p>Um eine Website auf der Grundlage eines Webpakets zu erstellen, geht man so vor:</p>
    <p>
        <code>Site -> Neue Site -> Allgemein -> Leere Website</code>
        <br />
        <code>Site -> Importieren -> Von Webpaket importieren (.fwp)</code>
    </p>
    <p>
        Um das Design eines Webpakets beurteilen zu können, muss man es wie oben beschrieben importieren. 
    </p>
    <p>Dieses Verzeichnis ist so konfiguriert, dass kein Startdokument definiert ist und außerdem das Verzeichnis angezeigt werden kann. Daher kann man den Inhalt eines jeden Verzeichnisses untersuchen.</p>

    <h3>Website Import</h3>
    <p>
        <code>Site -> Neu -> Allgemein - Websiteimport-Assistent </code>
        <br />
        oder 
        <code>Site -> Neue Site -> Allgemein -> Leere Website</code>
        <br />
        <code>Site -> Import -> Websiteimport-Assistent</code>
    </p>

    <p>Man kann damit ganz prominente Seitenentwürfe bis hinauf zur Microsoft-Website in das eigene Web importieren.</p>
    <p>An Verbindungstypen gibt es (diese gibt es auch für das Publizieren eines Webs, Ausnahme HTTP)</p>
    <ul>
        <li>FTP</li>
        <li>SFTP (SSH)</li>
        <li>FTPS (SSL)</li>
        <li>Frontpage (gibt es nicht mehr)</li>
        <li>WebDAV</li>
        <li>DateiSystem</li>
        <li>HTTP</li>
    </ul>
    <p>
        Von diesen Möglichkeiten am interessantesten ist HTTP. 
        Man kann damit jede beliebige Website mit einem hübschen Layout angeben und dann festlegen:
    </p>
    <ul>
        <li>Verschachtelungstiefe</li>
        <li>Maximale Objektgröße</li>
        <li>Nur passive (HTML- und Bilddateien)</li>
    </ul>
    <p>
        Funktioniert perfekt – aber nur für passive Websites (das sind solche, die wir gerade im Begriff sind herzustellen). 
        Funktioniert zwar auch für dynamische Websites aber nur vordergründig, weil die statische Version eines bestimmten Augenblicks gespeichert wird. 
        Die dahinter liegenden dynamischen Strukturen werden nicht gespeichert, die bleiben ein Geheimnis des Servers.
    </p>
    <p>
        Es gibt auch Seiten, die sich dem Download widersetzen (ist aber eher die Ausnahme). 
        Beispiel: http://by-expression.com/page/Tutorials
    </p>
    <p>Aber das Aussehen, die JavaScript- und Css-Dateien werden perfekt „gegrabbt“.</p>
    <p>Weitere nützliche Anwendung ist, dass man den Download von Bildern oder anderen verlinkten Daten (zip-Dateien, mp3-Dateien…) automatisieren kann. Auf einer Webseite können sich Hunderte solcher Links befinden und es ist eine mühsame Sache, alle diesen verlinkten Objekte einzeln anzuklicken und downzuloaden. Der Website Import Assistent kann genau das. Also auch, wenn man nicht unbedingt ein Layout abkupfern will, ist dieser Assistent ein wahrer „Hexenmeister“.</p>
    <h3>Master Pages</h3>
    <p>
        Für diese "Meisterklasse" gibt es leider keine fertigen Vorlagen. Man muss sie selbst herstellen. 
        Man kann sie aber verhältnismäßig einfach aus einer dynamischen Webvorlage herstellen.
        Es gibt dazu eine eigene Anleitung.
    </p>
    <p>
        Hier ein skizzierter Weg, wie man das machen kann: 
        Man übernimmt eine vorhandene Dynamische Webvorlage in eine solche leere Masterseite, 
        wobei die variablen Bereiche die Tags „ContentPlaceHolder“ sind.
    </p>
    <p>
        Man erstellt eine neue, leere Site mit <code>Site -> Neu -> Allgemein -> Leere Site</code>
        und erzeugt in dieser Seite eine Masterseite mit <code>Datei -> Neu -> Seite… -> Allgemein -> Masterseite</code>
        und gibt ihr den Namen <code>Site.master</code>. Diese Master-formatiert man so, wie man das haben möchte
    </p>
    <p>
        Danach erstellt man die weiteren Seiten, zum Beispiel die Startseite default.aspx so: 
        <code>Datei -> Neu… - > Seite -> Aus Masterseite erstellen -> „Site.master“</code> wählen. 
        In dieser Seite platziert man soviele Content-Tags als es in der Masterseite benutzerdefinierte Bereiche gibt, nach dem Muster:
    </p>
    <mod:inline runat="server" ID="ModInline1"
        Mode="high"
        Extension=".xml"
        UseLightBox="1"
        Text='<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="MainContent">
…hier ist der eigentliche Content…
</asp:Content>' />

    <p>
        Wenn man jetzt im Browser von Expression-Web die Seite <code>default.htm</code> aufruft, 
        sieht man eine Seite, die aus der Masterseite <code>site.master</code>
        und den Daten der Detailseite <code>default.aspx</code> zusammengesetzt ist 
        ohne aber dass die Elemente der Masterseite in der Detailseite enthalten wären. 
        Der Grund ist, dass diese Verbindung erst zum Zeitpunkt des Aufrufs am Server geschieht.
    </p>
    <p>
        Man kann diese Seiten in Expression Web anschauen und auch in der Browser-Vorschau 
        aber alle diese Ansichten benutzen den internen Webserver von Expression Web, 
        um die Verbindung zwischen den beiden Dateien herzustellen. 
        Man kann aber nicht die Datei <code>default.aspx</code> zum Beispiel aus dem Dateisystem aufrufen, 
        denn der Browser kann die Endung <code>aspx</code> nicht verarbeiten. 
        Man benötigt wür diese Technik unbedingt einen Webserver.
    </p>
    <h3>Konzept der „Dynamischen“ Webvorlagen</h3>
    <p>
        Sowohl in den Vorlagen (Templates) als auch in den Webpaketen gibt es zumindest eine Datei mit der Endung <code>.dwt</code>, 
        zum Beispiel eine <code>master.dwt</code>. Es kann aber auch mehrere geben. 
        Es handelt sich um eine gewöhnliche Html-Datei, deren Inhalt in alle Seiten eines Webs hinzugefügt wird, 
        mit dem Effekt, dass alle Seiten dasselbe Aussehen haben.
    </p>
    <p>Die dynamische Webvorlage wird daher allen am Web beteiligten Seiten „aufgedrückt“.</p>
    <p>
        Der Zusammenhang zwischen der Webvorlage und den Detailseiten ist insofern „dynamisch“ 
        als bei Änderungen an der Vorlage sich diese Änderung auch in allen anderen Seiten des Webs zeigt. 
        Allerdings nicht durch einen wirklich dynamischen Vorgang sondern so, 
        dass diese Änderung in allen Detailseiten während des Entwurfs in Expression Web hineingeschrieben wird. 
        Beim Abruf durch den Browser verhalten sich diese Seiten wie statische HTML-Seiten.
    </p>
    <h3>Publikation eines Webs</h3>
    <p>
        Bevor man ein Web publiziert, sollte man es testen. Warum? 
        Alles, was man am lokalen PC erledigen kann, geht schneller. 
        Testen im Web bedeutet auch, 
        dass eine Seite während dieser Testzeiten nicht oder fehlerhaft erreichbar ist 
        und daher werden durch vorherige Tests diese Zeiten möglichst kurz gehalten.
    </p>
    <p>
        Der erste Test erfolgt durch eine Browservorschau in Expression  Web. 
        Danach sollte man das Web am lokalen Webserver publizieren 
        und dort testen (Anleitung zur Installation des lokalen Webservers in den Aufgaben). Erst dann publiziert man die Seite im Web.
    </p>
    <p>
        Es gibt einerseits verschiedene Protokolle für die Publikation 
        und außerdem kann man ein Web auf verschiedenen Zielservern speichern. 
        Für jeden dieser Transfers muss man „Veröffentlichungsziele“ definieren.
    </p>
    <p>
        <code>Site -> Veröffentlichungseinstellungen</code>
        <br />
        Veröffentlichungsziel hinzufügen
    </p>

    <h4>Verbindungseinstellungen</h4>
    <ul>
        <li>Name: exweb.clubcomputer.at</li>
        <li>Verbindungstype: FTP</li>
        <li>Speicherort: ftp://ftp.exweb.clubcomputer.at</li>
        <li>Verzeichnis: exweb.clubcomputer.at\wwwroot</li>
        <li>Benutzername: exweb</li>
        <li>Kennwort:</li>
        <li>Ja: Passives FTP verwenden</li>
    </ul>
    <p>„Verbindung zum aktuellen Veröffentlichungsziel herstellen“</p>
    <p>
        Anmerkung: Verwendet man für den Transfer das Programm FileZilla, ist der Verzeichnisname
        <code>\exweb\exweb.clubcomputer.at\wwwroot</code>
        Es muss also der Benutzername und ein Backslash vorangestellt werden.
    </p>
    <h3>FTP-Server (für ClubComputer zu verwenden)</h3>
    <p>Erforderliche Angaben:</p>
    <ul>
        <li>Server: ftp.exweb.clubcomputer.at</li>
        <li>User: exweb</li>
        <li>Passwort:</li>
    </ul>
    <h3>Am lokalen Webserver</h3>
    <p>
        Die Inbetriebnahme des lokalen Webservers wird an anderer Stelle beschrieben. 
        Wichtig ist, dass der lokale Name des Webs in der Datei <code>hosts</code> 
        unter <code>C:\Windows\System32\Drivers\etc</code> eingetragen wird:
    </p>
    <p>127.0.0.1  exweb.localhost</p>
</asp:Content>